<template>
	<div style="width: 100vw;height: 100vh;display: flex;justify-content:center;align-items: center;background-color: #B0E2FF;">
		<div style="display: flex;flex-direction: column;justify-content:center;align-items: center;">
			<h1>我是登录框</h1>

			<el-input style="margin:10px;width:25vw" v-model="name" placeholder="请输入用户名" clearable></el-input>
			<el-input style="margin:10px;width:25vw" v-model="password" placeholder="请输入密码" clearable show-password></el-input>
			<div style="display: flex;margin:10px;">
				<el-button type="primary" style="width:14vw" @click="handleLogin">登录</el-button>
				<div style="width: 2vw;"></div>
				<el-button type="info" style="width:7vw" @click="backToHome">home</el-button>
			</div>
			<div style="height: 25vh;"></div>

		</div>

	</div>
</template>

<script>
import SparkMD5 from "spark-md5";
import { mapActions } from "vuex";
export default {
	name: "login",
	data() {
		return {
			name: "",
			password: "",
		};
	},
	computed: {},
	methods: {
		...mapActions(["getuserinfo"]),
		handleLogin() {
			if (this.name.length > 3 && this.password.length > 3) {
				var hexHash = SparkMD5.hash(this.password);
				this.getuserinfo({ tel: this.name, password: hexHash }).then((res) => {
					if (res.code == 200) {
						this.$message.success("欢迎回来，" + res.data.info.name);
					} else {
						this.$message.error(res.message);
					}
				});
			} else {
				this.$message.error("输入不符合要求");
			}
		},
		backToHome() {
			this.$router.push("home");
		},
	},
};
</script>

<style></style>